﻿@{
    ViewBag.Title = "统一登录";
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>@ViewBag.Title</title>
    <link href="~/Content/login/style.css" rel="stylesheet" />
    <link href="~/Content/jquery-labelauty.css" rel="stylesheet" />
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-placeholder/2.3.1/jquery.placeholder.js"></script>
    <script src="https://cdn.staticfile.org/jquery.complexify.js/0.5.1/jquery.complexify.js"></script>
    <script src="~/Scripts/supersized.3.2.7.min.js"></script>
    <script src="~/Scripts/supersized-init.js"></script>
    <script src="~/Scripts/jquery-labelauty.js"></script>
    <script src="https://cdn.staticfile.org/jsencrypt/3.0.0-rc.1/jsencrypt.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
    <div class="login-box">
        <div class="box-con tran">
            <form id="login-form" action="" method="POST" onsubmit="return false">
                <div class="login-con f-l">
                    <div class="form-group">
                        <header>
                            <h1>用户认证中心登录</h1>
                        </header>
                    </div>
                    @Html.AntiForgeryToken()
                    <div class="form-group">
                        <input type="text" id="username" name="username" placeholder="用户名/邮箱" />
                        <span class="error-notic">用户名/邮箱不正确</span>
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" id="password" placeholder="您的密码">
                        <span class="error-notic">用户名或密码不正确</span>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="请输入6位验证码(点击图片刷新验证码)" id="validcode" name="valid" class="valid" maxlength="6" onkeyup="showLoginBtn()">
                        <img class="validcode1" src="/Passport/ValidateCode" style="display: inline">
                        <span class="error-notic">验证码不正确</span>
                    </div>
                    <ul class="dowebok">
                        <li>
                            <input type="checkbox" name="remem" id="rememberMe" checked data-labelauty="自动登录">
                        </li>
                    </ul>
                    <div class="form-group" id="btnlogin" style="display: none">
                        <button type="button" class="tran pr" onclick="login()">
                            <a class="tran">登录</a>
                            <img class="loading" id="status" src="~/Content/images/loading.gif" style="display: none">
                        </button>
                        <span id="loginStatus" class="error-notic">登录失败，请检查表单完整性！</span>
                    </div>
                </div>
            </form>
            <!-- 登录 -->
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $(':input').labelauty(); //单选复选框美化插件初始化
        $("#loginbtn").click(login); //登录按钮事件
        $(".validcode1").click(flushcode); //刷新验证码

        //绑定各表单事件
        $("#validcode").on("keyup", function (e) {
            if (e.keyCode == 13) {
                //判断回车键
                login();
            }
        }); //验证码
        $("#myPassword").on("change", function (e) {
            document.querySelector("#myPassword2").value = "";
        }); //密码框1内容改变事件

        //表单事件
        $(".signup-form input").on("focus", function () {
            $(this).parent().addClass("border");
        });
        $(".signup-form input").on("blur", function () {
            $(this).parent().removeClass("border");
        });
    });

    //登录过程
    function login() {
        $(".tran").attr({ "disabled": "disabled" });
        $("#status").fadeIn(100);
        $("#status").parents("button").parents(".form-group").find(".error-notic").fadeOut(100);
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey($.cookie("PublicKey"));
        let form = $("#login-form").serialize();
        form = form.replace(encodeURIComponent(getFormParam("password")), encodeURIComponent(encrypt.encrypt(getFormParam("password"))));
        $.post("/Passport/Login", form, function (data) {
            if (data.Success) {
                location.href = data.Message || "/Home/Index"; //否则直接跳转
                return;
            } else {
                $("#status").parents("button").parents(".form-group").find(".error-notic").html(data.Message);
                $("#status").parents("button").parents(".form-group").find(".error-notic").fadeIn(100);
                $("#status").fadeOut(200);
                $(".tran").removeAttr("disabled");
                flushcode();
            }
        }).fail(function (data) {
            $("#status").parents("button").parents(".form-group").find(".error-notic").html(data.Message);
            $("#status").parents("button").parents(".form-group").find(".error-notic").fadeIn(100);
            $("#status").fadeOut(200);
        });
    }

    function getFormParam(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = $("#login-form").serialize().match(reg);
        return unescape(r[2]);
    }

    //刷新验证码
    function flushcode() {
        var code = "/Passport/ValidateCode?" + newGuid();
        $(".validcode1").attr("src", code);
    }

    //创建一个guid值
    function newGuid() {
        var guid = "";
        for (var i = 1; i <= 32; i++) {
            var n = Math.floor(Math.random() * 16.0).toString(16);
            guid += n;
            if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) {
                guid += "-";
            }
        }
        return guid;
    }

    //检查验证码
    function CheckValidCode(_this) {
        var code = $(_this).val();
        $.post("/Passport/CheckValidateCode", {
            "code": code
        }, function (data) {
            if (data.Success) {
                hideNotic(_this);
            } else {
                $(_this).parents(".form-group").find(".error-notic").fadeIn(100);
            }
        });
    }

    var _handle = ''; //储存电话是否填写正确

    //表单验证
    function showNotic(_this) {
        $(_this).parents(".form-group").find(".error-notic").fadeIn(100);
        $(_this).focus();
    } //错误提示显示

    function hideNotic(_this) {
        $(_this).parents(".form-group").find(".error-notic").fadeOut(100);
    } //错误提示隐藏

    var verify = {
        VerifyCount: function (_this) {
            var _count = "123456";
            var _value = $(_this).val();
            console.log(_value);
            if (_value != _count) {
                showNotic(_this);
            } else {
                hideNotic(_this);
            }
        }, //验证验证码

    }

    //显示登录按钮
    function showLoginBtn() {
        if ($(".valid").val().length >= 3) {
            $("#btnlogin").fadeIn(1000);
        } else {
            $("#btnlogin").fadeOut(1000);
        }
    }
</script>